<template>
	<view id="box">
		<u-toast ref="uToast"></u-toast>
		<view class="login">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="手机号" name="phone">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.phone" placeholder="请输入手机号" maxlength="11"/>
					<image v-if="!isIconPhone" :class="[isClass?'iconStylePhone':'']"  class="icon_min_imgs" src="@/static/images/login/success.png"></image>
					<image v-if="isIconPhone" class="icon_min_imgs" src="@/static/images/login/error.png"></image>
				</uni-forms-item>
				<uni-forms-item required label="短信验证" name="code">
					<uni-easyinput :inputBorder="false" type="number"
						v-model="formData.code" placeholder="请输入验证码" maxlength="6" clearSize="0"/>
					<text class="send_code" @click="sendCode">{{content}}</text>
				</uni-forms-item>
				<uni-forms-item required label="新密码" name="password">
					<uni-easyinput :inputBorder="false" type="password" :passwordIcon="false" v-model="formData.password" placeholder="请输入密码" maxlength="18"></uni-easyinput>
					<image v-if="!isIconPWD" :class="[isClass?'iconStylePhone':'']" class="icon_min_imgs" src="@/static/images/login/success.png"></image>
					<image v-if="isIconPWD" class="icon_min_imgs" src="@/static/images/login/error.png"></image>
				</uni-forms-item>
			</uni-forms>
			<button @click="formSubmit" class="login_btn" style="border-radius: 45px;">确认</button>
		</view>
	</view>
</template>

<script>
	//获取验证码
	import {getLoginCode} from '@/static/http/getData.js'
	//修改密码
	import {updateUserPWD} from '@/static/http/getData.js'
	
	export default {
		data() {
			return {
				formData: {
					phone: '',
					password: '',
					code:'',
				},
				isClass: true,
				iconStylePhone: {display: 'none'},
				iconStylePWD: {display: 'none'},
				isIconPhone: false,
				isIconPWD: false,
				content: '获取验证码',
				//定时器
				timer: '',
				//验证码
				code: '',
				//倒计时
				timeout: 60,
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确手机号',
							}
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码',
							}, 
							/* {
								pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
								errorMessage: '密码长度为6-18位',
							} */
						]
					},
					// 对code字段进行必填验证
					code: {
						rules: [
							{
								required: true,
								errorMessage: '请输入验证码',
							},
						],
					}
				}
			}
		},
		methods: {
			//获取验证码
			sendCode(){
				this.$refs.form.validateField(['phone']).then(res => {
					if(this.timeout == 60){
						getLoginCode().then(res => {
							this.code = res.data.data;
							console.log(this.code);
							if(this.code != ''){ 
								var params = {
									type: 'default',
									message: this.code,
								}
								this.$refs.uToast.show({
									...params
								})
							}
						})
						this.getTimeOut();
					}
				}).catch(err => {
					//移除表单的验证结果
					this.$refs.form.clearValidate(['phone', 'password']);
					uni.showToast({
						title:'请输入手机号',
						icon:'error',
						duration: 2000
					})
				})
			},
			//定时器
			getTimeOut(){
				this.timer = setInterval(()=>{
					this.content = this.timeout + '秒后重新获取';
					this.timeout--;
					if(this.timeout < 0){
						this.timeout = 60;
						this.content = '重新发送验证码';
						//停止定时器 
						clearInterval(this.timer);
					}
				},1000)
			},
			formSubmit(){
				this.$refs.form.validate().then(res => {
					this.$refs.form.clearValidate(['phone', 'password', 'code']);
					console.log(this.formData);
					this.isIconPhone = false;
					this.isIconPWD = false;
					if(this.timeout != 60){
						console.log(this.formData.code);
						if(this.formData.code == this.code){
							this.formData = {
								phone: res.phone,
								password: res.password
							}
							updateUserPWD(this.formData).then(res => {
								if(res.data.data){
									this.formData.phone = '',
									this.formData.password = '',
									this.formData.code = '',
									this.timeout = 60;
									//停止定时器
									clearInterval(this.timer);
									this.content = '获取验证码',
									uni.showToast({
										title:'修改成功',
										duration:1000
									})
								}else{ 
									uni.showToast({ 
										title:'修改失败',
										duration:1000
									})
								}
							})
						}else{
							uni.showToast({
								title: '验证码错误',
								icon: 'error',
								duration: 2000
							})
						}
					}else{
						uni.showToast({
							title: '验证码失效',
							icon: 'error',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('校验未通过');
					this.$refs.form.clearValidate(['phone', 'password','code']);
					if(this.formData.phone == '' && this.formData.password != ''){
						this.isIconPhone = true;
						this.isIconPWD = false;
					}else if(this.formData.phone != '' && this.formData.password == ''){
						this.isIconPhone = false;
						this.isIconPWD = true;
					}else if(this.formData.phone == '' && this.formData.password == ''){
						this.isIconPhone = true;
						this.isIconPWD = true;
					}else {
						this.isIconPhone = false;
						this.isIconPWD = false;
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	#box {
		width: 84%;
		margin: 0 auto;
		padding-top: 20%;
		text-align: center;
	}
	.send_code{
		position: absolute;
		top: 7px;
		right: 0px;
		color: #1ABC9C;
	}
	.login_btn{
		margin-top: 20px;
		background-color: #1ABC9C;
		color: #fff;
	}
	.icon_min_imgs{
		position: absolute;
		top: 7px;
		right: 0px;
		width: 20px;
		height: 20px;
	}
	.iconStylePhone{
		display: none;
	}
</style>
